<template>
    <div class="box">
        <headers title="首页"></headers>
        <swipers :swiper="swiper"></swipers>

        <van-pull-refresh v-model="loading" @refresh="onRefresh">

            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(v, i) in list" :key="i" @click="todetail(v.goods_id)">
                    <van-image
                        :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg'" />
                    {{ v.goods_name }}
                </van-grid-item>
            </van-grid>

        </van-pull-refresh>


    </div>
</template>

<script setup>
import { ref } from "vue";
import { swiperdataApi, catitemsApi, categoriesApi, searchApi, detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import headers from '@/components/headers.vue';
import swipers from "@/components/swipers.vue";

let swiper = ref('');
const getswiperdataApi = () => {
    swiperdataApi().then((res) => {
        swiper.value = res.data.message;
    })
}
getswiperdataApi();

let list = ref([]);
const getsearchApi = () => {
    searchApi().then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();

//调用函数传参
const todetail = (goods_id) => {
    router.push({ path: '/detail', query: { goods_id: goods_id } })
}

//下拉刷新
import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        // count.value++;
        getsearchApi();
    }, 1000);
};


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>